<template>
  <!-- 发送指令 -->
  <h-modal class="event-modal" v-model.lazy="show" title="发送指令" @submit="submit()">
    <a-form-model ref="ruleForm" :model="form" :rules="rules" size="large">
      <a-row :gutter="20">
        <a-col :span="10">
          <p>事件名称：{{ formData.title | htmlFilter }}</p>
          <p>事件描述：{{ formData.describe | htmlFilter }}</p>
          <div class="btn-custom">
            <a-form-model-item label="" prop="state">
              <a-checkbox-group v-model="form.state" :options="options">

              </a-checkbox-group>
            </a-form-model-item>
            <!-- <a-button type="primary" shape="round" class="a-button-blue a-button-large" @click="form.askContent='请关注该事件';form.state = 1">
              关注事件
            </a-button>
            <a-button style="margin-left: 12px;" type="primary" shape="round" class="a-button-blue a-button-large" @click="form.state = 2;submit()">
              立即处置
            </a-button> -->
          </div>
          <a-form-model-item label="区县市网信办处置指令内容" prop="askContent1" v-if="form.state.includes(1)">
            <a-textarea :rows="5" v-model.lazy="form.askContent1" placeholder="请输入区县市网信办处置指令内容"></a-textarea>
            <a-button type="primary" shape="round" class="a-button-blue a-button-large sss sss1" @click="form.askContent1='【关注本事件】';">
              关注事件
            </a-button>
            <a-button type="primary" shape="round" class="a-button-blue a-button-large sss" @click="form.askContent1='【立即处置本事件】';">
              立即处置
            </a-button>
          </a-form-model-item>
          <a-form-model-item label="市级部门处置指令内容" prop="askContent2" v-if="form.state.includes(2)">
            <a-textarea :rows="5" v-model.lazy="form.askContent2" placeholder="请输入市级部门处置指令内容"></a-textarea>
            <a-button style="margin-left: 12px;" type="primary" shape="round" class="a-button-blue a-button-large sss sss1" @click="form.askContent2='【关注本事件】'">
              关注事件
            </a-button>
            <a-button style="margin-left: 12px;" type="primary" shape="round" class="a-button-blue a-button-large sss" @click="form.askContent2='【立即处置本事件】'">
              立即处置
            </a-button>
          </a-form-model-item>
        </a-col>
        <a-col :span="14">
          <div class="line-title-head"><span>接受对象</span></div>
          <!-- <div style="text-align: left;margin-top: 12px">
            <a-radio-group buttonStyle="solid" v-model="deptType" @change="change">
              <a-radio-button value="0">内协</a-radio-button>
              <a-radio-button value="1">外协</a-radio-button>
            </a-radio-group>
          </div> -->
          <div style="margin: 8px 0;">
            <a-space>
              <a-select allowClear style="width: 160px" v-model="params.isOut" placeholder="指令下发对象">
                <a-select-option value="0">区县市网信办</a-select-option>
                <a-select-option value="1">市级部门</a-select-option>
              </a-select>
              <a-input allowClear style="width: 160px" v-model="params.depart" placeholder="请输入单位名称"></a-input>
              <a-button type="primary" @click="getList">筛选</a-button>
            </a-space>
          </div>
          <div style="margin: 8px 0;">
            已选择对象：
            <a-tag closable @close="deleteUser(item)" v-for="(item, i) in selectedRow" :key="i">{{ item.depart }}</a-tag>
          </div>
          <h-table
            ref="htable"
            @init="getList"
            :config="config"
            :showHeadBgNone="false"
            :zebraStripes="false"
            :dataAll="dataAll"
            @select="select">
            <span slot="action" slot-scope="{record}">
              <a-button v-if="selectedRow.find(item => item.id === record.id)" type="danger" @click="deleteUser(record)">取消</a-button>
              <a-button v-else type="primary" @click="addSelect(record)">选择</a-button>
            </span>
            <span slot="isOut" slot-scope="{record}">
              {{ record.isOut == 1 ? '市级部门' : '区县市网信办' }}
            </span>
          </h-table>
        </a-col>
      </a-row>

    </a-form-model>

    <!-- <template slot="btn">
      <a-button type="primary" shape="round" class="a-button-blue a-button-large" @click="form.askContent='请关注该事件'">
        关注事件
      </a-button>
      <a-button type="primary" shape="round" class="a-button-blue a-button-large" @click="submit">
        立即处置
      </a-button>
    </template> -->
  </h-modal>
</template>

<script>
import moment from 'moment';
import { addOrderDepart, address } from '@/api/serve';
import { getIsOutDepart } from '@/api/dept';
import cloneDeep from 'lodash/cloneDeep';

export default {
  props: {
    showModal: {
      type: Boolean,
      default: true
    },
    // departId: {
    //   type: [String, Number],
    //   defalut: ''
    // },
    id: {
      type: String,
      defalut: ''
    },
    describe: {
      type: String,
      defalut: ''
    },
    formData: {
      type: Object,
      default: () => {}
    }
  },
  model: {
    prop: 'showModal',
    event: 'update:showModal'
  },
  watch: {
    showModal: {
      handler(val) {
        this.show = val;
        if (this.describe) {
          this.formData.describe = this.describe;
        }
      },
      immediate: true
    },
    show(val) {
      this.$emit('update:showModal', val);
    }
  },
  data() {
    return {
      deptType: '0',
      departId: [],
      address: [],
      config: {
        rowKey: 'id',
        bordered: true,
        dataSource: [],
        scroll: {
          y: 250,
          x: false
        },
        columns: [
          // {
          //   align: 'center',
          //   title: '地址',
          //   dataIndex: 'address'
          // },
          // {
          //   align: 'center',
          //   title: '内外协',
          //   dataIndex: 'isOut',
          //   // width: 300,
          //   scopedSlots: { customRender: 'isOut' }

          // },
          {
            align: 'left',
            title: '单位名称',
            dataIndex: 'depart'
            // width: 300
          },
          {
            align: 'center',
            title: '操作',
            dataIndex: 'action',
            scopedSlots: { customRender: 'action' },
            width: 140
          }
        ],
        pagination: false
      },
      moment,
      show: false,
      deptArr: [],
      dept: [],
      form: {
        // askContent: '',
        userIdList: [],
        state: [1],
        askContent1: '',
        askContent2: ''
      },
      params: {
        address: undefined,
        depart: '',
        isOut: '0'
      },
      rules: {
        askContent1: [{ required: true, message: '请输入' }],
        askContent2: [{ required: true, message: '请输入' }],
        state: [{ required: true, message: '请选择' }]
      },
      selectedRow: [],
      dataAll: [],
      options: [
        { label: '区县市网信办', value: 1 },
        { label: '市级部门', value: 2 }
      ]
    };
  },
  created() {
    this.getList(true);
    this.getAddress();
  },
  methods: {
    getAddress() {
      address().then(res => {
        this.address = res.data;
      });
    },
    select({ selectedRowKeys, selectedRow }) {
      console.log('selectedRowKeys, selectedRow',selectedRowKeys, selectedRow);
      this.departId = selectedRowKeys;
      this.selectedRow = this.dataAll.filter(e => selectedRowKeys.includes(e.id));
    },
    addSelect(row) {
      if (this.selectedRow.find(item => item.id === row.id)) {
        return
      }
      this.selectedRow.push(row);
      this.departId = this.selectedRow.map(e => e.id);
    },
    getList(showAll) {
      getIsOutDepart({
        // isOut: this.deptType,
        eventId: this.id,
        ...this.params
      }).then(res => {
        this.config.dataSource = res.data;
        if (showAll === true) {
          this.dataAll = res.data;
        }
        this.$refs.htable.update(this.departId);
      });
    },
    edit(formData) {
      this.form = cloneDeep(formData);
    },
    // change() {
    //   this.getList();
    // },
    deleteUser({ id }) {
      const findIndex = this.selectedRow.findIndex(e => e.id === id);
      this.selectedRow.splice(findIndex, 1);
      this.departId = this.selectedRow.map(e => e.id);
    },
    submit() {
      if (!this.departId.length) {
        this.$message.error('请选择单位');
        return;
      }
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          // this.form.state.forEach((e) => {
          //   addOrderDepart({ ...this.form, departIdList: this.departId, eventId: this.id, state: e, askContent: e == 1 ? this.form.askContent1 : this.form.askContent2 }).then(res => {
          //     this.$message.success('下发成功');
          //     this.show = false;
          //     this.form = {
          //       askContent: '',
          //       userIdList: [],
          //       state: [1]
          //     };
          //     this.$refs.htable.cancel();
          //     this.$emit('submit', true);
          //   });
          // });
          addOrderDepart({ ...this.form, departIdList: this.departId, eventId: this.id, state: 2 }).then(res => {
            this.$message.success('下发成功');
            this.show = false;
            this.form = {
              askContent: '',
              userIdList: [],
              state: [1]
            };
            this.$emit('submit', true);
            this.selectedRow = []
            this.departId = []
          });
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    }
  }
};
</script>

<style>
.btn-custom {
  /* position: absolute;
  right: 20px;
  z-index: 222;
  color: #00a2aa; */
}
.sss {
  position: absolute;
  right: 0;
  top: -125px;
}
.sss1 {
  position: absolute;
  right: 90px;
  top: -125px;
}
</style>
